<script setup>
// 
// computed 计算属性
// 1.计算属性中不应该有副作用
// 比如异步请求/修改dom
// 2.避免直接修改计算属性的值
// 计算属性应该是只读的
// 

import { ref } from 'vue'
import { computed } from 'vue'

let list = ref([1, 2, 3, 4, 5, 6, 7])

let computed_list = computed(() => {
  return list.value.filter((item) => {return item > 2 })
})

console.log(computed_list)
let addcount = () => list.value.push(10 * Math.random())
</script>

<template>
  <p>原数组：{{list}}</p>
  <p>计算属性处理过：{{computed_list}}</p>
  <button @click="addcount()">修改原数组的值</button>
</template>
 